<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<div class="flex flex-col h-full">
				<div class="w-full">
					<el-carousel height="150px" indicator-position="none">
						<el-carousel-item :interval="90000" v-for="i in Math.ceil(originData.length / 3)" :key="i">
							<el-row :gutter="12">
								<el-col :span="8" v-for="k in 3" :key="k">
									<el-card shadow="hover" v-if="originData[3 * i + k - 4]?.deviceTypeName">
										<template #header>
											<div class="flex items-center text-lg" :style="{ color: colors[k - 1] }">
												<div class="font-semibold">{{ originData[3 * i + k - 4]?.deviceTypeName }}</div>
												<div class="flex items-center justify-center ml-1"></div>
											</div>
										</template>
										<div class="flex items-center flex-nowrap" :style="{ color: colors[k - 1] }">
											<div class="flex flex-col items-center justify-center flex-1 flex-nowrap">
												<div class="text-2xl font-semibold">{{ originData[3 * i + k - 4]?.total }}</div>
												<div class="text-info">{{ t('dashboard.total') }}</div>
											</div>
											<div class="flex flex-col items-center justify-center flex-1 flex-nowrap">
												<div class="text-2xl font-semibold">{{ originData[3 * i + k - 4]?.fault || 0 }}</div>
												<div class="text-info">{{ t('dashboard.fault') }}</div>
											</div>
											<div class="flex flex-col items-center justify-center flex-1 flex-nowrap">
												<div class="text-2xl font-semibold">{{ originData[3 * i + k - 4]?.alarm || 0 }}</div>
												<div class="text-info">{{ t('dashboard.alarm') }}</div>
											</div>
										</div>
									</el-card>
								</el-col>
							</el-row>
						</el-carousel-item>
					</el-carousel>
				</div>
				<div class="flex flex-col h-[calc(100%-150px)]">
					<div class="relative h-1/2 max-h-1/2">
						<el-tabs v-model="activeName" class="h-full">
							<el-tab-pane name="1" class="h-full">
								<template #label>
									<div class="flex items-center">
										<span class="iconfont icon-line-chart"></span>
										<div class="ml-1">{{ t('dashboard.stateCurve') }}</div>
									</div>
								</template>
								<deviceStatus v-if="activeName === '1'" />
							</el-tab-pane>
							<el-tab-pane label="报警类型统计" name="2" class="h-full">
								<template #label>
									<div class="flex items-center">
										<el-icon><Histogram /></el-icon>
										<div class="ml-1">{{ t('dashboard.AlarmConfirmationType') }}</div>
									</div>
								</template>
								<alarmType v-if="activeName === '2'" />
							</el-tab-pane>
						</el-tabs>
						<!-- <div class="absolute h-[40px] w-[60px] top-[8px] right-[10px]">
							<el-select v-model="filterValue" size="small">
								<el-option label="月" value="month" />
								<el-option label="天" value="day" />
							</el-select>
						</div> -->
					</div>
					<div class="mt-2 h-1/2 max-h-1/2">
						<el-row :gutter="20" class="h-full">
							<el-col :span="8" class="h-full">
								<div class="h-full p-1">
									<el-card class="h-full" shadow="hover">
										<template #header>
											<div class="flex items-center h-[24px]">
												<el-icon color="#00c997" size="18"><PieChart /></el-icon>
												<span class="ml-1 font-semibold">{{ t('dashboard.installationRatio') }}</span>
											</div>
										</template>
										<div class="flex w-full h-full">
											<deviceInstall />
										</div>
									</el-card>
								</div>
							</el-col>
							<el-col :span="8" class="h-full">
								<div class="h-full p-1">
									<el-card class="h-full" shadow="hover">
										<template #header>
											<div class="flex items-center justify-between h-[24px]">
												<div class="flex items-center">
													<el-icon color="#00c997" size="18"><PieChart /></el-icon>
													<div class="ml-1 font-semibold">{{ t('dashboard.faultReason') }}</div>
												</div>
												<div class="w-[120px]">
													<el-select v-model="deviceModelId" size="small" @change="handleModelChange">
														<el-option v-for="item in deviceModelList" :key="item.id" :label="item.deviceModelName" :value="item.id">
															<!-- <span style="float: left">{{ item.deviceVersionName }}</span>
															<span style="float: right; color: var(--el-text-color-secondary); font-size: 13px">{{ item.deviceTypeName }}</span> -->
														</el-option>
													</el-select>
												</div>
											</div>
										</template>
										<div class="flex w-full h-full">
											<devicePie ref="faultCausePieRef" />
										</div>
									</el-card>
								</div>
							</el-col>
							<el-col :span="8" class="h-full">
								<div class="h-full p-1">
									<el-card class="h-full" shadow="hover">
										<template #header>
											<div class="flex items-center h-[24px]">
												<el-icon color="#00c997" size="18"><PieChart /></el-icon>
												<span class="ml-1 font-semibold">{{ t('dashboard.deviceRatio') }}</span>
											</div>
										</template>
										<div class="flex w-full h-full">
											<deviceRatio />
										</div>
									</el-card>
								</div>
							</el-col>
						</el-row>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="dashboard">
import alarmType from './components/alarmType.vue';
import deviceStatus from './components/deviceStatus.vue';
import devicePie from './components/devicePie.vue';
import deviceInstall from './components/deviceInstall.vue';
import deviceRatio from './components/deviceRatio.vue';
import { screenDevice, productRotation } from '/@/api/analysis/index';
import { fetchListAllModel as fetchAllModelList } from '/@/api/platform/basicDeviceModel';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const colors = ref(['#ee8121', '#2c9e1c', '#6d7881']);
const activeName = ref('1');
// const filterValue = ref('day');
const deviceModelId = ref();
const deviceModelList: any = ref([]);
const faultCausePieRef = ref();
const originData: any = ref([]);

// 设备统计数据
const deviceInfo = reactive({
	lowerDeptCount: '',
	placeRoomCount: '',
	deviceOnlineCount: '',
	deviceOfflineCount: '',
	deviceNormalCount: '',
	deviceFaultCount: '',
	deviceNormalCountPer: '',
	deviceFaultCountPer: '',
});
// 获取设备统计数据
const getDevice = () => {
	screenDevice().then((res) => {
		Object.assign(deviceInfo, res.data);
	});
};
getDevice();
// 轮播图数据
const getProductRotation = () => {
	productRotation().then((res) => {
		originData.value = res.data;
	});
};
getProductRotation();

// 查询设备型号
const getModelList = () => {
	fetchAllModelList({ state: 10 }).then((res) => {
		let l = res.data;
		if (!l.length) return;
		deviceModelList.value = l;
		deviceModelId.value = l[0].id;
		handleModelChange(l[0].id);
	});
};
const handleModelChange = (id: string) => {
	faultCausePieRef.value.getFaultCauseStatistics(id);
};
onMounted(() => {
	getModelList();
});
</script>

<style lang="scss" scoped>
:deep(.el-card__header) {
	padding: 10px;
}
:deep(.el-tabs__content) {
	height: calc(100% - 55px);
}
:deep(.el-card__body) {
	height: calc(100% - 45px);
}
</style>
